<template>
  <div>
    <div class="container">
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        header-cell-class-name="table-header"
      >
        <el-table-column
          v-for="(value, index) in columns"
          :key="index"
          :prop="value.prop"
          :label="value.label"
          align="center"
        >
        </el-table-column>

        <el-table-column prop="content" label="会议内容" align="center">
          <template #default="scope">
            <el-link :href="scope.row.content" :icon="Download" type=""
              >下载附件</el-link
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import axios from "../utils/request";
import { Download } from "@element-plus/icons-vue";

interface TableItem {
  id: number;
  title: string;
  paper_copy: number;
  digital_copy: number;
  content: string;
  publish_time: string;
  print_time: string;
  conference_id: number;
  publish_danwei: number;
  print_danwei: number;
}

const columns = [
  { label: "纪要编号", prop: "id" },
  { label: "纪要标题", prop: "title" },
  { label: "纸质份数", prop: "paper_copy" },
  { label: "电子份数", prop: "digital_copy" },
  // { label: "纪要内容", prop: "content" },
  { label: "关联会议", prop: "conference_name" },
  { label: "发布单位", prop: "publish_danwei_name" },
  { label: "发布时间", prop: "publish_time" },
];

const tableData = ref<TableItem[]>([]);

const getData = async () => {
  const res = await axios.get("/summary/viewsets/");
  const summary = res.data.results as TableItem[];

  axios
    .get("/conference/api/title")
    .then((res) => res.data.results)
    .then((chushi) => {
      const titleArray = chushi.map((item: { title: any }) => item.title);

      tableData.value = tableData.value.map(({ ...obj }) => {
        return {
          ...obj,
          conference_name: titleArray[obj.conference_id - 1],
        };
      });
    });
  axios
    .get("/danwei/api/name")
    .then((res) => res.data.results)
    .then((rank) => {
      const nameArray = rank.map((item: { name: any }) => item.name);

      tableData.value = tableData.value.map(({ ...obj }) => {
        return {
          ...obj,
          publish_danwei_name: nameArray[obj.publish_danwei - 1],
        };
      });
    });

  console.log(
    localStorage.getItem("role") === "admin",
    localStorage.getItem("ms_username")
  );

  tableData.value = summary;
};

getData();
const rowData = ref({});
let idx: number = -1;
let visible = ref(false);
let idEdit = ref(false);
const handleEdit = (index: number, row: TableItem) => {
  idx = index;
  rowData.value = row;
  idEdit.value = true;
  visible.value = true;
};
const handleDelete = (index: number) => {
  // 二次确认删除
  ElMessageBox.confirm("确定要删除吗？", "提示", {
    type: "warning",
  })
    .then(() => {
      ElMessage.success("删除成功");
      tableData.value.splice(index, 1);
    })
    .catch(() => {});
};

const updateData = (row: TableItem) => {
  idEdit.value ? (tableData.value[idx] = row) : tableData.value.unshift(row);

  console.log(row);
  axios
    .put(`/person/viewsets/${row.id}/`, row)
    .then((res) => res.data)
    .then((data) => console.log("Put---------------", data));
  closeDialog();
};

const closeDialog = () => {
  visible.value = false;
  idEdit.value = false;
};
</script>

<style scoped></style>
